<template>
    <div class="main-box">
        <Header @switch="switchNavBer" @search="HandlerSearch"></Header>
        <div v-show="app.isHandler == 0 && user.id == undefined" class="open">
            <svg-icon icon-class="view" size="0.5rem" color="var(--main-1)" @click="app.isHandler = 1"></svg-icon>
        </div>
        <div class="list-box">
            <div v-show="!isSearch" class="item side-card" v-for="(item, index) in activeRecordList" :key="index"
                 @mouseleave="quitVideo">
                <div v-if="controllerType == 1" class="comm video side-card">
                    <RecordVideo ref="videoRef" :videoUrl="item.video" :poster="item.cover" :index="index"
                                 @upIndex="getIndex"></RecordVideo>
                </div>
                <div v-else-if="controllerType == 2" class="comm images side-card">
                    <n-carousel v-if="imgList(item.imgListStr).length > 1" draggable>
                        <n-carousel-item v-for="(img, index) in imgList(item.imgListStr)" :key="index"
                                         style="height: 100%">
                            <img class="record-img" :src="img.slice(1,-1)" alt="no image">
                        </n-carousel-item>
                    </n-carousel>
                    <img v-else class="record-img" :src="item.imgListStr.slice(2,-2)" alt="no image">
                </div>
                <div v-else class="comm cover side-card" :class="{scroll: isScroll}" :style="cover(item.cover)">
                    <div class="text">{{ item.content }}</div>
                </div>
                <div class="record-info">
                    <n-popover trigger="click" placement="bottom">
                        <template #trigger>
                            <img v-if="item.userIntro.avatar" class="author-avatar" :src="item.userIntro.avatar"
                                 alt="author"/>
                            <img v-else class="author-avatar" src="@/assets/images/user/default-author.png"
                                 alt="author"/>
                        </template>
                        <div style="text-align: center;color: #2264c2;font-weight: bold;font-size: 0.3rem;
                                line-height: 0.5rem;margin: 0 auto;width: 2.6rem;overflow: hidden;
                                text-overflow: ellipsis;white-space: nowrap">
                            {{ item.userIntro.nickname }}
                        </div>
                        <div style="width: 3rem;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.userIntro.intro }}
                        </div>
                        <div style="display: flex;justify-content: center;margin-top: 0.1rem">
                            <n-button type="info" size="tiny">查看</n-button>
                        </div>
                    </n-popover>
                    <router-link :to="`/record/${item.id}`">
                        <div class="title">{{ item.title }}</div>
                    </router-link>
                    <div class="tags">
                        <div class="tag-item" v-for="(tag, index) in item.tagNameList" :key="index">{{ tag }}</div>
                    </div>
                    <div class="element">
                        <span>
                            <span v-if="item.type == 1" style="color:var(--main-1-h8)">约会</span>
                            <span v-else-if="item.type == 2" style="color:var(--main-1-h8)">活动</span>
                            <span v-else-if="item.type == 3" style="color:var(--main-1-h8)">赛事</span>
                            <span v-else-if="item.type == 4" style="color:var(--main-1-h8)">帮助</span>
                        </span>
                        <span>
                            <span v-if="item.video != null & item.video != ''"
                                  style="color:var(--main-2-hs3)">.视频</span>
                            <span v-else style="color:var(--main-2-hs2)">.图片</span> /
                       </span>
                        <span style="color: var(--pink-color)">
                            {{ item.likeNumber }}点赞
                        </span>/
                        <span style="color: var(--green-color)">
                            {{ item.viewCount }}浏览
                        </span>
                    </div>
                    <div class="time">{{ item.createTime }}</div>
                </div>
            </div>
            <LoadA v-show="isLoading || isSearch"></LoadA>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from "@/views/record/list/Header.vue";
import {Record, RecordQuery} from "@/api/record/types";
import {getRecordList} from "@/api/record";
import {useEventListener, useWindowScroll} from "@vueuse/core";
import useStore from "@/store";
import RecordVideo from "@/views/record/list/RecordVideo.vue";

const {x, y} = useWindowScroll();
const {app, user} = useStore();

const videoRef = ref();
const activeRecordList = ref<Record[]>([]);

const data = reactive({
    pageQuery: {
        pageNum: 1,
        pageSize: 10,
        keyword: '',
    } as RecordQuery,
    distance: 0,
    total: 0,
    isLoading: false,
    isSearch: false,
    recordList: [] as Record[],
    controllerType: 0,
    activeNarBar: '全部',
    videoIndex: 0,
    isScroll: false,
});

const {
    pageQuery,
    distance,
    total,
    isSearch,
    isLoading,
    recordList,
    controllerType,
    activeNarBar,
    videoIndex,
    isScroll
} = toRefs(data);

let timerId: ReturnType<typeof setTimeout> | null = null;

const cover = computed(() => (cover: string) => 'background:url(' + cover + ')');
const imgList = computed(() => (str: string) => str.slice(1, -1).split(','));

/**
 * 调用相应视频组件方法，鼠标离开卡片后触发
 */
const quitVideo = () => {
    if (activeNarBar.value == '视频') {
        videoRef.value[videoIndex.value].clearTimer();
    }
}

/**
 * 捕捉视频组件的index,与上一个方法搭配
 * @param index 视频组件的index
 */
const getIndex = (index: number) => {
    videoIndex.value = index;
}
/**
 * 滚动条距离屏幕底部的距离
 */
useEventListener(document, "scroll", () => {
    isScroll.value = true;
    distance.value = Math.floor(document.documentElement.scrollHeight - window.innerHeight - window.scrollY);
    if (timerId === null) {
        timerId = setTimeout(() => {
            isScroll.value = false;
            timerId = null;
        }, 1000);
    }
});

watchEffect(() => {
    if (distance.value <= 90) {
        if (total.value < pageQuery.value.pageNum * pageQuery.value.pageSize || isSearch.value) {
            return;
        }
        isLoading.value = true;
        pageQuery.value.pageNum++;
        getRecord();
    }
});

/**
 * 监听handler的switchNavBar事件
 * @param name 导航栏名
 */
const switchNavBer = (name: string) => {
    activeNarBar.value = name;
    isLoading.value = false;
    isSearch.value = false;
    switch (name) {
        case '全部':
            controllerType.value = 0;
            activeRecordList.value = recordList.value;
            break;
        case '推荐':
            controllerType.value = 0;
            activeRecordList.value = recordList.value.filter(item => item.type == 1);
            break;
        case '视频':
            controllerType.value = 1;
            activeRecordList.value = recordList.value.filter(item => item.video !== null && item.video !== '');
            break;
        case '图片':
            controllerType.value = 2;
            activeRecordList.value = recordList.value.filter(item => item.imgListStr !== null && item.imgListStr !== "");
            break;
        case '约会':
            controllerType.value = 0;
            activeRecordList.value = recordList.value.filter(item => item.type == 1);
            break;
        case '活动':
            controllerType.value = 0;
            activeRecordList.value = recordList.value.filter(item => item.type == 2);
            break;
        case '赛事':
            controllerType.value = 0;
            activeRecordList.value = recordList.value.filter(item => item.type == 3);
            break;
        case '帮忙':
            controllerType.value = 0;
            activeRecordList.value = recordList.value.filter(item => item.type == 4);
            break;
        default:
            break;
    }
}

/* 监听handler的search事件 */
const HandlerSearch = (text: string) => {
    isSearch.value = true;
    recordList.value = [];
    pageQuery.value.keyword = text;
    pageQuery.value.pageNum = 1;
    getRecord();
}

const getRecord = () => {
    getRecordList(pageQuery.value).then(({data}) => {
        if (data.code === 200) {
            recordList.value.push(...data.rows);
            total.value = data.total;
            setTimeout(() => {
                switchNavBer(activeNarBar.value);
            }, 1000)
        }
    });
}

onMounted(() => {
    getRecord();
})
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin";

.main-box {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0.1rem;

  .open {
    position: fixed;
    top: 1.5rem;
    right: 0.5rem;
    cursor: pointer;
  }

  .list-box {
    @include flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    margin-top: 1.2rem;

    .item {
      width: 8rem;
      height: 6.3rem;
      padding: 0.1rem;
      overflow: hidden;

      .comm {
        height: 4.65rem;
        width: 7.8rem;
        border-radius: 0.25rem;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
      }

      .cover {
        background-position: center !important;
        background-size: cover !important;

        .text {
          font-size: 0.35rem;
          line-height: 0.5rem;
          color: var(--text-color);
          transform: scale(0);
          transition: 0.5s ease-in-out;
          padding: 0.1rem 0.3rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 9;
          -webkit-box-orient: vertical;
          height: 100%;
          width: 7.8rem;
          backdrop-filter: blur(0.25rem) saturate(150%);
        }

        &:not(.scroll):hover {
          .text {
            transition: 0.5s ease-in-out;
            transform: scale(1);
          }
        }
      }

      .video {
        border-radius: 0.1rem;
        padding-top: 0.1rem;
      }

      .images {
        .record-img {
          width: 100%;
          height: 100%;
          background-position: center;
          background-size: cover;
        }
      }

      .record-info {
        position: relative;
        top: 0.2rem;
        height: 1.5rem;

        .author-avatar {
          padding: 0;
          border: none;
          box-shadow: 0 0 0.06rem 0.03rem rgba(0, 0, 0, 0.2);
          width: 0.8rem;
          height: 0.8rem;
        }

        .title {
          height: 1rem;
          width: 5rem;
          display: inline-block;
          position: absolute;
          top: 0;
          left: 1rem;
          font-size: 0.3rem;
          font-weight: bold;
          background: var(--header-bg-color);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .tags {
          position: absolute;
          top: 0;
          right: -0.15rem;
          padding: 0.1rem;
          height: 0.7rem;
          background: var(--main-2);
          border-radius: 0.2rem 0 0 0.2rem;
          display: flex;
          justify-content: right;
          align-items: center;
          gap: 0.2rem;
          transform: translateX(calc(100% - 0.2rem));
          transition: 0.5s ease-in-out;

          &:hover {
            cursor: pointer;
            transform: none;
          }

          .tag-item {
            height: 0.5rem;
            background: var(--main-1);
            border-radius: 0.1rem;
            padding: 0.1rem;
            font-size: 0.25rem;
            font-weight: bold;
            line-height: 0.3rem;
            color: var(--text-color);
            cursor: pointer;
          }
        }

        .element {
          position: absolute;
          bottom: 0.2rem;
          left: 0.2rem;
          font-size: 0.25rem;
          color: var(--text-color);
        }

        .time {
          position: absolute;
          bottom: 0.2rem;
          right: 0.1rem;
          color: var(--text-color);
        }
      }
    }
  }
}
</style>